<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 解决兼容新问题: -->
    <!-- 将浏览器中不识别的esmodule代码去交给babel转换,然后对那些import下来的文件去进行ajax请求把请求下来的文件再去进行转换从而支持esm -->
    <!-- 但是这样子的话在那些支持的环境中就会运行两次代码. 这个问题可以通过添加nomodule属性解决 -->
    <!-- 这种方式效率很低下,只适合在开发环境中.在生产环境中还是要预先把代码都编译好再部署 -->
    <script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/babel-browser-build.js"></script>
    <script nomodule src="https://unpkg.com/browser-es-module-loader@0.4.1/dist/browser-es-module-loader.js"></script>
    <script nomodule src="https://unpkg.com/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>
    <script type="module">
        import {foo} from './module.js';
        console.log(foo);
    </script>
</body>
</html>